<template>
  <div class="product-list">
    <!-- 搜索和分类 -->
    <div class="filter-bar">
      <div class="search">
        <input type="text" placeholder="搜索产品..." v-model="searchKeyword" />
        <button @click="search">搜索</button>
      </div>
      <div class="categories">
        <button 
          v-for="category in categories" 
          :key="category" 
          :class="{ active: currentCategory === category }"
          @click="filterByCategory(category)"
        >
          {{ category }}
        </button>
      </div>
    </div>

   
    <div class="products-grid">
      <div class="product-card" v-for="product in filteredProducts" :key="product.id">
        <img :src="product.image" :alt="product.name" class="product-image" />
        <div class="product-info">
          <div class="product-category">{{ product.category }}</div>
          <h3 class="product-name">{{ product.name }}</h3>
          <p class="product-desc">{{ product.desc }}</p>
          <div class="product-price">¥{{ product.price }}</div>
          <div class="product-rating">
            <span v-for="i in 5" :key="i" class="star" :class="{ filled: i <= product.rating }">★</span>
            ({{ product.rating }})
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 模拟产品数据
const products = ref([
  {
    id: 1,
    name: '智能手机',
    category: '电子产品',
    price: 2999,
    desc: '最新款智能手机，拥有强大的性能和优秀的拍照功能',
    image: 'https://picsum.photos/300/200?random=1',
    rating: 4.8
  },
  {
    id: 2,
    name: '无线耳机',
    category: '电子产品',
    price: 599,
    desc: '高品质无线蓝牙耳机，音质清晰，佩戴舒适',
    image: 'https://picsum.photos/300/200?random=2',
    rating: 4.6
  },
  {
    id: 3,
    name: '智能手表',
    category: '电子产品',
    price: 1299,
    desc: '多功能智能手表，健康监测，运动追踪',
    image: 'https://picsum.photos/300/200?random=3',
    rating: 4.7
  },
  {
    id: 4,
    name: '休闲卫衣',
    category: '服装',
    price: 199,
    desc: '纯棉材质，舒适透气，时尚百搭',
    image: 'https://picsum.photos/300/200?random=4',
    rating: 4.5
  },
  {
    id: 5,
    name: '运动鞋',
    category: '运动',
    price: 399,
    desc: '缓震防滑，适合跑步、健身等多种运动',
    image: 'https://picsum.photos/300/200?random=5',
    rating: 4.9
  },
  {
    id: 6,
    name: '小说集',
    category: '书籍',
    price: 89,
    desc: '经典小说合集，文学价值高，阅读体验佳',
    image: 'https://picsum.photos/300/200?random=6',
    rating: 4.4
  }
])

const searchKeyword = ref('')
const currentCategory = ref('全部')
const categories = ref(['全部', '电子产品', '服装', '家居', '运动', '书籍'])

// 筛选产品
const filteredProducts = computed(() => {
  return products.value.filter(product => {
    // 分类筛选
    const categoryMatch = currentCategory.value === '全部' || product.category === currentCategory.value
    // 搜索筛选
    const searchMatch = product.name.includes(searchKeyword.value) || product.desc.includes(searchKeyword.value)
    return categoryMatch && searchMatch
  })
})

// 分类筛选方法
const filterByCategory = (category) => {
  currentCategory.value = category
}

// 搜索方法
const search = () => {
  // 可在此添加防抖等逻辑
}
</script>

<style scoped>
.product-list {
  padding: 20px;
}
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.search {
  display: flex;
  gap: 8px;
}
.search input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.search button {
  padding: 8px 16px;
  background: #6a4a9e;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.categories button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
}
.categories button.active {
  background: #6a4a9e;
  color: white;
  border-color: #6a4a9e;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.product-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.product-info {
  padding: 16px;
}
.product-category {
  font-size: 12px;
  color: #6a4a9e;
  margin-bottom: 8px;
}
.product-name {
  font-size: 18px;
  margin-bottom: 8px;
}
.product-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-price {
  font-size: 20px;
  font-weight: bold;
  color: #e64340;
  margin-bottom: 8px;
}
.product-rating {
  font-size: 14px;
  color: #ffc107;
}
.star.filled {
  color: #ffc107;
}
</style>